<template>
	<s-layout title="群聊详情" :bgStyle="{
		color:'#F6F6F6'
	}">
	<su-sticky>
		<view class="sticky">
			<su-tabs :list="state.type" background="transparent" @change="onTabsChange" :current="state.index"
				:borderShow="false" :activeStyle="state.subActiveStyle" :inactiveStyle="state.inactiveStyle" lineWidth="15"
				lineColor="#3172E1"></su-tabs>
		</view>
	</su-sticky>
	<view class="chat-con ss-safe-bottom">

		<view class="" v-for="(item, index) in state.list" :key="index">
			<view class="item-chat" @click="jumpGroup(item)">
				<view class="item-image">
					<image
						:src="cdn(item.face_url) || 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/20231117163016c941b7397.png'"
						mode="aspectFill"></image>
				</view>
				<view class="item-name">
					<view class="name ss-line-1">
						{{ item.title }}
					</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="state.total > 0" :status="state.loadStatus" :content-text="{
					        contentdown: '上拉加载更多',
					      }" @tap="loadmore" />
		<s-empty v-if="state.total === 0"
			icon="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/vocal/data-empty.png" text="暂无数据"></s-empty>
	</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		onMounted,
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import $store from '@/im/store/im';
	import imApi from '@/im/api/index.js'
	import {cdn,udid} from '@/im/config/index.js'

	const iMMyInfo = computed(() => $store().userInfo);

	const state = reactive({
		type: [],
		subActiveStyle: {
			'font-size': '32rpx',
			'color': '#3172E1',
		},
		inactiveStyle: {
			'font-size': '32rpx',
			'color': '#414141'
		},
		index: 0,
		list: [],
		page: 1,
		loadStatus: '',
		total: 1
	})

	onLoad(() => {
		getType()
	})

	onReachBottom(() => {
		loadmore()
	})

	const loadmore = () => {
		if (state.loadStatus !== 'noMore') {
			state.page++
			getList()
		}
	}
	
	const onTabsChange = (e) => {
		if (e.index === state.index) {
			return 
		}
		state.index = e.index
		state.list = []
		state.page = 1
		state.total = 1
		getList()
	}

	const getType = async () => {
		const {
			code,
			data
		} = await imApi.groupType()

		if (code === 0) {
			state.type = data
			getList()
		}
	}

	const getList = async () => {
		state.loadStatus = 'loading'
		const {
			code,
			data
		} = await imApi.myGroupList({
			im_id: iMMyInfo.value.userID,
			type: state.type[state.index].status,
			page: state.page,
			list_rows: 20
		})

		if (code === 0) {
			state.list = state.list.concat(data.data)
			state.total = data.total
			if (data.current_page < data.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
		}
	}

	const jumpGroup = (item) => {
		$store().getGroupInfo(`GROUP${item.group_id}`)
	}
</script>

<style lang="scss" scoped>
	
	.sticky {
		background-color: #F6F6F6;
	}
	.chat-con {
		.item-chat {
			background: #fff;
			width: calc(100% - 48rpx);
			padding: 24rpx;
			display: flex;
			border-bottom: 1px solid #f1f1f1;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;
			}

			.item-name {
				height: 80rpx;
				line-height: 80rpx;
				// width: calc(100% - 280rpx);
				margin-left: 20rpx;
			}

			.item-time {
				text-align: right;
				width: 180rpx;

				.time {
					font-size: 22rpx;
					color: #ccc;
				}
			}


			.item-tips {

				color: #b9b4b4;
				font-size: 24rpx;
				margin-top: 10rpx;

				.item-tips-content {
					width: 500rpx;
					-webkit-line-clamp: 1;

					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}


			.item-image {
				width: 80rpx;
				height: 80rpx;
				position: relative;
			}

		}
	}
</style>